<template>
    <div>
        <el-dialog title="查看详情" width="1000px" class="icon-dialog" :visible.sync="show" :before-close="closeForm" append-to-body @open="open">
            <el-form ref="form" :size="size" :model="form" :label-width="$store.getters.device !== 'mobile'?'18%':'90px'">
                <table class="table table-bordered" align="center" width="100%" style="word-break:break-all; margin-bottom:15px;  font-size:13px;">
                    <tbody>
                        <tr>
                            <td class="title" width="100">订单编号：</td>
                            <td>
                                {{ form.orderInfo.order_num_alias }}
                            </td>
                        </tr>
                        <tr>
                            <td class="title" width="100">下单用户：</td>
                            <td>
                                {{ form.orderInfo.member.nickname }}
                            </td>
                        </tr>
                        <tr>
                            <td class="title" width="100">下单时间：</td>
                            <td>
                                {{ form.orderInfo.create_time }}
                            </td>
                        </tr>
                        <tr>
                            <td class="title" width="100">预约时间：</td>
                            <td>
                                {{ form.orderInfo.toservicetime?form.orderInfo.toservicetime:form.orderInfo.ServiceTime }}
                            </td>
                        </tr>
                        <tr>
                            <td class="title" width="100">订单状态：</td>
                            <td>
                                {{ form.orderInfo.orderStatus.name_yuyue }}
                            </td>
                        </tr>
                        <tr v-if="form.orderInfo.cancel_reason">
                            <td class="title" width="100">取消原因：</td>
                            <td>
                                {{ form.orderInfo.cancel_reason	 }}
                            </td>
                        </tr>
                        <tr>
                            <td class="title" width="100">支付方式：</td>
                            <td>
                                {{ form.orderInfo.paymethod.title }}
                            </td>
                        </tr>
                        <tr>
                            <td class="title" width="100">支付时间：</td>
                            <td>
                                {{ form.orderInfo.pay_time }}
                            </td>
                        </tr>
                        <tr>
                            <td class="title" width="100">订单金额：</td>
                            <td>
                                <!-- <el-input v-model="form.orderInfo.total" auto-complete="off" clearable placeholder="请输入订单金额" /> -->
                                {{ form.orderInfo.total }}
                            </td>
                        </tr>
                        <tr>
                            <td class="title" width="100">提成金额：</td>
                            <td>
                                <!-- <el-input v-model="form.orderInfo.total" auto-complete="off" clearable placeholder="请输入订单金额" /> -->
                                {{ form.orderInfo.total_settle }}
                            </td>
                        </tr>
                        <tr v-if="form.orderInfo.address">
                            <td class="title" width="100">服务地址：</td>
                            <td>
                                <div>联系人：{{ form.orderInfo.address.name }} {{ form.orderInfo.address.telephone }}</div>
                                <div>地 址：{{ form.orderInfo.address.alladdress }}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="title" width="100">订购的服务：</td>
                            <td>
                                <div v-for="(item, index) in form.goods" :key="index">
                                    <div class="image__preview">
                                        <el-image v-if="item.image" class="table_list_pic" :src="item.image" :preview-src-list="[item.image]" />
                                    </div>
                                    <div class="goodstext">
                                        <div>{{ item.name+'\n' }}</div>
                                        <div v-if="item.sku">{{ item.sku+'\n' }}</div>
                                        <div>数量：{{ item.quantity }}</div>
                                        <div>小计：{{ item.total }}</div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="title" width="100">订单备注：</td>
                            <td>
                                <div>{{ form.orderInfo.remark }}</div>
                                <div v-for="(scr, index) in form.orderInfo.OrderImage" :key="index">
                                    <div class="image__preview">
                                        <el-image v-if="scr" class="table_list_pic" :src="scr" :preview-src-list="[scr]" />
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <el-divider></el-divider>
                <div style="text-align: center;line-height:30px;font-size: 15px;font-weight: bold;">门店信息</div>
                <el-table ref="multipleTable" v-loading="loading" row-key="id" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :border="false" :stripe="true" class="eltable" :data="form.orderInfo.store"
                    style="width: 100%">
                    <el-table-column align="center" type="" property="title" label="门店" show-overflow-tooltip width="120" />
                    <el-table-column align="center" type="" property="tel" label="联系号码" show-overflow-tooltip width="100" />
                    <el-table-column align="center" type="" property="address" label="地址" show-overflow-tooltip width="200" />
                    <el-table-column align="center" type="" property="incomelog.order_total" label="提成总价" show-overflow-tooltip width="" />
                    <el-table-column align="center" type="" property="incomelog.return_percent" label="提成点" show-overflow-tooltip width="" />
                    <el-table-column align="center" type="" property="incomelog.income" label="提成" show-overflow-tooltip width="" />
                </el-table>
                <el-divider></el-divider>
                <div style="text-align: center;line-height:30px;font-size: 15px;font-weight: bold;">师傅信息</div>
                <el-table ref="multipleTable" v-loading="loading" row-key="id" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :border="false" :stripe="true" class="eltable" :data="form.orderInfo.staff"
                    style="width: 100%">
                    <el-table-column align="center" type="" property="title" label="名称" show-overflow-tooltip width="120" />
                    <el-table-column align="center" type="" property="tel" label="联系号码" show-overflow-tooltip width="100" />
                    <el-table-column align="center" type="" property="status" label="工作进度" show-overflow-tooltip width="" />
                    <el-table-column align="center" type="" property="incomelog.order_total" label="提成总价" show-overflow-tooltip width="" />
                    <el-table-column align="center" type="" property="incomelog.return_percent" label="提成点" show-overflow-tooltip width="" />
                    <el-table-column align="center" type="" property="incomelog.income" label="提成" show-overflow-tooltip width="" />
                </el-table>
                <el-divider></el-divider>
                <el-row v-for="(item, index) in form.fields" :key="index">
                    <el-col v-if="item.inputtype === 'text'" :span="24">
                        <el-form-item :label="item.viewmingcheng">
                            <el-input v-model="item.fieldsvalue" auto-complete="off" clearable :placeholder="'请输入'+item.viewmingcheng" />
                        </el-form-item>
                    </el-col>
                    <el-col v-if="item.inputtype === 'textarea'" :span="24">
                        <el-form-item :label="item.viewmingcheng">
                            <el-input v-model="item.fieldsvalue" type="textarea" auto-complete="off" :autosize="{ minRows: 2, maxRows: 18}" clearable :placeholder="'请输入'+item.viewmingcheng" />
                        </el-form-item>
                    </el-col>
                    <el-col v-if="item.inputtype === 'pics'" :span="24">
                        <el-form-item :label="item.viewmingcheng">
                            <ImagesUpload size="small" file-type="image" :image.sync="item.fieldsvalue" />
                        </el-form-item>
                    </el-col>
                    <el-col v-if="item.inputtype === 'select'" :span="24">
                        <el-form-item v-if="item.fieldsmingcheng==='province_id'" :label="item.viewmingcheng">
                            <el-cascader v-model="item.fieldsvalue" expand-trigger="hover" :options="areaoptions" />
                        </el-form-item>
                        <el-form-item v-else :label="item.viewmingcheng">
                            <el-select v-model="item.fieldsvalue" style="width:100%" filterable clearable placeholder="请选择">
                                <el-option v-for="(item,i) in item.selectvaluearray" :key="i" :label="item.key" :value="item.val" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="item.inputtype === 'radio'" :span="24">
                        <el-form-item :label="item.viewmingcheng">
                            <el-radio-group v-model="item.fieldsvalue">
                                <el-radio v-for="(item,i) in item.selectvaluearray" :key="i" :label="item.val">{{ item.key }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="item.inputtype === 'switch'" :span="24">
                        <el-form-item :label="item.viewmingcheng">
                            <el-switch v-model="item.fieldsvalue" :active-value="1" :inactive-value="0" />
                        </el-form-item>
                    </el-col>
                    <el-col v-if="item.inputtype === 'date'" :span="24">
                        <el-form-item :label="item.viewmingcheng">
                            <el-date-picker v-model="item.fieldsvalue" type="datetime" placeholder="选择时间" />
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button :loading="loading" type="primary" @click="submit">
                    <span v-if="!loading">确 定</span>
                    <span v-else>提 交 中...</span>
                </el-button>
                <el-button @click="closeForm">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import ImagesUpload from '@/components/common/ImagesUpload.vue'
export default {
    name: 'Orderdetail',
    components: {
        ImagesUpload
    },
    props: {
        show: {
            type: Boolean,
            default: true
        },
        size: {
            type: String,
            default: 'mini'
        },
        info: {
            type: Object
        }
    },
    data() {
        return {
            form: {
                orderInfo: {
                    orderStatus: {},
                    address: {},
                    paymethod: {},
                    member: {}
                }
            },
            loading: false
        }
    },
    watch: {
        show(val) {
        }
    },
    methods: {
        open() {
            this.form = this.info
        },
        submit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.loading = true
                    this.$api.post('/order/update', this.form).then(res => {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        })
                        this.$emit('refesh_list')
                        this.closeForm()
                    }).catch(() => {
                        this.loading = false
                    })
                }
            })
        },
        closeForm() {
            this.$emit('update:show', false)
            this.loading = false
            if (this.$refs['form'] !== undefined) {
                this.$refs['form'].resetFields()
            }
        }
    }
}
</script>
<style>
.image__preview {
    float: left;
    padding-right: 5px;
}

.goodstext {
    float: left;
    padding-left: 5px;
    width: 200px;
}

.table_list_pic {
    width: 60px;
}
</style>
